my-swiper {
  .main {}
  .wheel {
    .swiper-container {
      width: 100%;
      height: 180px;
      background: linear-gradient(to bottom, color($colors, primary) 50%, color($colors, light) 50%)
    }
    .swiper-wrapper {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      height: 100%;
      width: 100%;
    }
    .swiper-slide img {
      display: block;
      width: auto;
      max-width: 100%;
      height: 100%;
      max-height: 100%;
      position: relative;
      -webkit-transition: 300ms;
      -moz-transition: 300ms;
      -ms-transition: 300ms;
      -o-transition: 300ms;
      transition: 300ms;
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9);
      -webkit-backface-visibility: hidden;
    }
    .swiper-slide-active img {
      -webkit-transform: scale(1);
      -moz-transform: scale(1);
      -ms-transform: scale(1);
      -o-transform: scale(1);
      transform: scale(1);
      opacity: 1;
    }
    .swiper-slide .inner {
      height: 100%;
      padding: 20px 10px 20px;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
    }
  }
  .near-join {
    .swiper-slide img {
      height: 120px;
    }
  }
}
